<template>
  <div>
    <!-- 轮播图 -->
    <section>
      <div class="banner">
        <div class="container">
          <!-- 轮播图图片 -->
          <el-carousel height="500px" arrow="always">
            <el-carousel-item
              v-for="bannerImg in bannerList"
              :key="bannerImg.id"
            >
              <img
                :src="bannerList.length > 0 ? bannerImg.imgUrl : ''"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
          <div v-if="leftShow">
            <!-- 轮播图左侧 -->
            <ul>
              <li
                v-for="(category, index) in categoryList"
                :key="category.id"
                @mouseenter="showGoods(index)"
              >
                <a href="#"
                  ><span>{{ category.name }}</span></a
                >
                <a href="#">居家生活用品</a>
                <a href="#"> 收纳</a>
              </li>
            </ul>
            <!-- 隐藏 -->
            <div class="banner-detail" v-if="show" @mouseleave="show = false">
              <div class="banner-title">
                <span>分类商品推荐 </span>
                <span> 根据您的购买或浏览记录推荐</span>
              </div>
              <ul>
                <li v-for="good in goods" :key="good.id">
                  <div class="detail-box">
                    <div class="img-box">
                      <img :src="good.picture" alt="" />
                    </div>
                    <div class="img-text">
                      <h3>{{ good.name }}</h3>
                      <p>{{ good.desc }}</p>
                      <i>￥</i><span>{{ good.price }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Carousel",
  data() {
    return {
      show: false,
      index: 0,
    };
  },
  mounted() {
    this.$store.dispatch("getBannerList");
  },
  methods: {
    showGoods(index) {
      this.show = true;
      this.index = index;
    },
  },
  computed: {
    ...mapState({
      categoryList: (state) => state.home.categoryList,
    }),
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
    goods() {
      return this.categoryList[this.index].goods;
    },
    //轮播图左侧列表显示与隐藏
    leftShow() {
      let show = true;
      if (this.$route.path == "/category") {
        show = false;
      }
      return show;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1240px;
  margin: 0 auto;
}
.banner {
  height: 500px;
  background-color: #f5f5f5;
}

.banner .container {
  position: relative;
}

.banner ul {
  width: 250px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

.banner ul li {
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.banner ul li:hover {
  background-color: #27ba9b;
}

.banner ul li a {
  color: #ffffff;
}

.banner ul li span {
  margin: 0 4px 0 0;
  font-size: 16px;
}
.banner-detail {
  z-index: 999;
  width: 990px;
  height: 500px;
  position: absolute;
  left: 250px;
  top: 0;
  padding: 10px 15px;
  background-color: rgba(255, 255, 255, 0.5);
}

.banner-detail .banner-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.banner-detail .banner-title span:first-child {
  font-size: 20px;
}

.banner-detail ul {
  width: 100%;
  height: 450px;
  margin-top: 50px;
  padding: 15px 0 10px 15px;
  background: none;
}

.banner-detail ul li {
  width: 310px;
  height: 130px;
  margin-bottom: 15px;
  margin-right: 15px;
  color: #ffffff;
  background-color: #27ba9b;
  float: left;
}

.detail-box {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.detail-box:hover {
  background-color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.img-box,
.img-text {
  float: left;
}

.detail-box .img-box {
  width: 100px;
  height: 100%;
  line-height: 130px;
  padding: 0 10px;
}

.detail-box .img-box img {
  width: 100%;
}

.detail-box .img-text {
  width: 200px;
  height: 100%;
  text-align: left;
  line-height: 25px;
  padding-top: 25px;
}

.detail-box .img-text h3 {
  color: black;
}

.detail-box .img-text p {
  color: gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-box i {
  color: red;
}
.detail-box span {
  color: red;
  padding: 0 0 0 3px;
}
/deep/ .el-carousel__arrow--left {
  left: 250px;
  background: rgba(0, 0, 0, 0.5);
}
/deep/ .el-carousel__arrow--right {
  background: rgba(0, 0, 0, 0.5);
}
</style>